<template>
  <div>
    <div> 点</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px">1212</div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    var geometry = new THREE.BufferGeometry();
    console.log('geometry', geometry);

    var p2 = new THREE.Vector3(50, 0, 0); //顶.坐标
    var p3 = new THREE.Vector3(0, 70, 0); //顶点3坐标
    var p1 = new THREE.Vector3(80, 70, 0); //顶点14'标
    let pointone: any = [];
    pointone.push(p1);
    pointone.push(p2);
    pointone.push(p3);
    //顶点坐标加%eometry.时象
    geometry.setFromPoints(pointone);

    var materialTwo = new THREE.MeshBasicMaterial({
      // vertexColors: THREE.VertexColors, //以顶点领色为准
      color: 0xff123123,
      // size: 5.0, //点对象萦尺
    });
    const line = new THREE.Line(geometry, materialTwo);
    scene.add(line);

    const pointsMaterial = new THREE.PointsMaterial({
      color: '#123ad9',
      size: 5.0, //点对象萦尺
    });
    // 点

    const Points = new THREE.Points(geometry, pointsMaterial);
    scene.add(Points);

    // 环境光
    const light = new THREE.AmbientLight(0xffffffff, 0.7);
    // light.position.set(200, 100, 200);

    scene.add(light);

    // 点光源
    const point = new THREE.PointLight(0xffd41c0f, 0.6);
    point.position.set(100, 100, 100);
    scene.add(point);
    //点光源辅助
    const pointLightHelper = new THREE.PointLightHelper(point, 2);
    scene.add(pointLightHelper);

    function renderFun() {
      // console.log('asdfasdf');
      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
